<template>
	<el-tabs type="card" v-model="activeName" class="demo-tabs">
		<el-tab-pane
			v-for="item in tableData"
			:key="item.id"
			:label="item.createDate + ' ' + item.createTime"
			:name="item.sessionId">
			<h2 style="margin-bottom: 10px;">问答情况</h2>
			<section class="question">
				<div
					v-for="(str, index) in JSON.parse(item.content)"
					:key="index"
					:class="str.role">
					{{str.message}}
				</div>
			</section>
			<el-divider></el-divider>
			<h2 style="margin-bottom: 10px;">结果分析</h2>
			<pre class="result" v-html="marked.parse(item.result)"></pre>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup>
import { get } from '@/axios'
import { ref } from 'vue'
import { marked } from 'marked'
const activeName = ref('')
const tableData = ref([])
getTableData()
function getTableData () {
	get('/interviewRecord/list', {}, content => {
		if (content.length > 0) {
			tableData.value = content
			activeName.value = content[0].sessionId		
		}
	})
}
</script>

<style scoped lang="scss">
.question {
	div {
		line-height: 20px;
		margin: 10px 0;
	}
	.ai {
		color: #ff0000;
	}
}
.result {
	background-color: #f5f5f5;
	padding: 10px;
	white-space: pre-wrap;
}
</style>